<template>
	<view class="myPicker">
		<slot> </slot>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" append-to-body="true" @maskClick="closePop">
			<view class="popup-content">
				<view class="header-box">
					<uni-section :title="props.popupTitle" type="line">
						<uni-search-bar :focus="true" placeholder="请输入搜索内容" cancelButton="always"  @input="input"> </uni-search-bar>
						<view class="option-list">
							<view class="list-row" v-for="(item, index) in store.state.myPicker.customerList" :key="index"
								@tap="optionValue(item)">
								{{ item.label }}
							</view>
						</view>
					</uni-section>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import store from '@/store'
	import {
		ref,
		reactive,
		defineEmits,
		defineProps,
		defineExpose
	} from 'vue'

	const emit = defineEmits(['getVlaue'])
	const props = defineProps(['popupTitle'])
	let popup = ref(null)
	let popListCopy = ref([])
	// 打开选择器
	const toggle = (type) => {
		if (store.state.myPicker.customerList) {
			popListCopy.value = JSON.parse(
				JSON.stringify(store.state.myPicker.customerList),
			)
			popup.value.open(type)
		}
	}
	// 关闭选择器
	const closePop = () => {
		popup.value.close()
		emit('closePop', '')
	}
	// 模糊搜索
	const input = (e) => {
		if (e === '') {
			store.commit('setCustomerList', popListCopy.value)
		} else {
			let searchVlaue = store.state.myPicker.customerList.filter((v) => {
				return v.label.includes(e)
			})
			store.commit('setCustomerList', searchVlaue)
		}
	}

	// 选择的值
	const optionValue = (v) => {
		store.commit('setCustomerList', popListCopy.value)
		emit('getVlaue', v)
	}
	

	defineExpose({
		toggle,
		closePop
	})
</script>

<style lang="scss" scoped>

	.myPicker {
		:deep(.uni-input-input) {
			text-align: left !important;
		}

		.option-list {
			height: 600rpx;
			overflow-y: auto;
			text-align: center;
			line-height: 80rpx;

			.list-row {
				// border-bottom: 1px solid #E5E6EB;
			}
		}
	}
</style>